<nav class="header-section" role="navigation">
    <a class="toggle-btn"><i class="fa fa-bars"></i></a>
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" ng-click="vm.navCollapsed = !vm.navCollapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#/"><span translate="global.title">QuayPS</span> <span class="navbar-version">v{{VERSION}}</span></a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse" uib-collapse="vm.navCollapsed" ng-switch="vm.isAuthenticated()">
            <ul class="nav navbar-nav navbar-right">
                <li ui-sref-active="active">
                    <a ui-sref="home" ng-click="vm.navCollapsed = true">
                        <span class="glyphicon glyphicon-home"></span>
                        <span class="hidden-sm" translate="global.menu.home">Home</span>
                    </a>
                </li>
                <!-- jhipster-needle-add-element-to-menu - JHipster will add new menu items here -->
                <!--<li ng-class="{active: vm.$state.includes('entity')}" ng-switch-when="true" uib-dropdown class="dropdown pointer">-->
                    <!--<a class="dropdown-toggle" uib-dropdown-toggle href="" id="entity-menu">-->
                        <!--<span>-->
                            <!--<span class="glyphicon glyphicon-th-list"></span>-->
                            <!--<span class="hidden-sm" translate="global.menu.entities.main">-->
                                <!--Entities-->
                            <!--</span>-->
                            <!--<b class="caret"></b>-->
                        <!--</span>-->
                    <!--</a>-->
                    <!--<ul class="dropdown-menu" uib-dropdown-menu  style="z-index: 110">-->
                        <!--<li ui-sref-active="active" ><a ui-sref="driver" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-asterisk"></span>-->
                        <!--&#xA0;<span translate="global.menu.entities.driver">Driver</span></a></li>-->
                        <!--<li ui-sref-active="active" ><a ui-sref="car" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-asterisk"></span>-->
                        <!--&#xA0;<span translate="global.menu.entities.car">Car</span></a></li>-->
                        <!--<li ui-sref-active="active" ><a ui-sref="menu" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-asterisk"></span>-->
                        <!--&#xA0;<span translate="global.menu.entities.menu">Menu</span></a></li>-->
                        <!--&lt;!&ndash; jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here &ndash;&gt;-->
                    <!--</ul>-->
                <!--</li>-->
                <li ng-class="{active: vm.$state.includes('account')}" uib-dropdown class="dropdown pointer">
                    <a class="dropdown-toggle" uib-dropdown-toggle href="" id="account-menu">
                        <span>
                            <span class="glyphicon glyphicon-user"></span>
                            <span class="hidden-sm" translate="global.menu.account.main">
                                Account
                            </span>
                            <b class="caret"></b>
                        </span>
                    </a>
                    <ul class="dropdown-menu" uib-dropdown-menu>
                        <li ui-sref-active="active" ng-switch-when="true"><a ui-sref="settings" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-wrench"></span>
                            &#xA0;<span translate="global.menu.account.settings">Settings</span></a></li>
                        <li ui-sref-active="active" ng-switch-when="true"><a ui-sref="password" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-lock"></span>
                            &#xA0;<span translate="global.menu.account.password">Password</span></a></li>
                        <li ui-sref-active="active" ng-switch-when="true"><a href="" ng-click="vm.logout()" id="logout" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-log-out"></span>
                            &#xA0;<span translate="global.menu.account.logout">Sign out</span></a></li>
                        <li ui-sref-active="active" ng-switch-when="false"><a href="" ng-click="vm.login()" id="login" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-log-in"></span>
                            &#xA0;<span translate="global.menu.account.login">Sign in</span></a></li>
                        <li ui-sref-active="active" ng-switch-when="false"><a ui-sref="register" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-plus-sign"></span>
                            &#xA0;<span translate="global.menu.account.register">Register</span></a></li>
                    </ul>
                </li>
                <li ng-class="{active: vm.vm.$state.includes('admin')}"  ng-switch-when="true" has-authority="ROLE_ADMIN" uib-dropdown class="dropdown pointer">
                    <a class="dropdown-toggle" uib-dropdown-toggle href="" id="admin-menu">
                        <span>
                            <span class="glyphicon glyphicon-tower"></span>
                            <span class="hidden-sm" translate="global.menu.admin.main">Administration</span>
                            <b class="caret"></b>
                        </span>
                    </a>
                    <ul class="dropdown-menu" uib-dropdown-menu>
                        <li ui-sref-active="active"><a ui-sref="user-management" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-user"></span>
                            &#xA0;<span translate="global.menu.admin.userManagement">User management</span></a></li>
                        <li ui-sref-active="active"><a ui-sref="jhi-tracker" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-eye-open"></span>
                                &nbsp;<span translate="global.menu.admin.tracker">User tracker</span></a></li>
                        <li ui-sref-active="active"><a ui-sref="jhi-metrics" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-dashboard"></span>
                            &#xA0;<span translate="global.menu.admin.metrics">Metrics</span></a></li>
                        <li ui-sref-active="active"><a ui-sref="jhi-health" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-heart"></span>
                            &#xA0;<span translate="global.menu.admin.health">Health</span></a></li>
                        <li ui-sref-active="active"><a ui-sref="jhi-configuration" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-list-alt"></span>
                            &#xA0;<span translate="global.menu.admin.configuration">Configuration</span></a></li>
                        <li ui-sref-active="active"><a ui-sref="audits" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-bell"></span>
                            &#xA0;<span translate="global.menu.admin.audits">Audits</span></a></li>
                        <li ui-sref-active="active"><a ui-sref="logs" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-tasks"></span>
                            &#xA0;<span translate="global.menu.admin.logs">Logs</span></a></li>
                        <li ng-hide="vm.inProduction" ui-sref-active="active"><a ui-sref="docs" data-toggle="collapse" data-target=".navbar-collapse.in"><span class="glyphicon glyphicon-book"></span>
                            &#xA0;<span translate="global.menu.admin.apidocs">API</span></a></li>
                        <!-- jhipster-needle-add-element-to-admin-menu - JHipster will add entities to the admin menu here -->
                    </ul>
                </li>
                <li ui-sref-active="active" uib-dropdown class="dropdown pointer" ng-controller="JhiLanguageController as languageVm">
                    <a class="dropdown-toggle" uib-dropdown-toggle href="" ng-if="languageVm.languages.length > 1">
                        <span>
                            <span class="glyphicon glyphicon-flag"></span>
                            <span class="hidden-sm" translate="global.menu.language">Language</span>
                            <b class="caret"></b>
                        </span>
                    </a>
                    <ul class="dropdown-menu" uib-dropdown-menu ng-if="languageVm.languages.length > 1">
                        <li active-menu="{{language}}" ng-repeat="language in languageVm.languages">
                            <a href="" ng-click="languageVm.changeLanguage(language)" data-toggle="collapse" data-target=".navbar-collapse.in">{{language | findLanguageFromKey}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
